<template>
  <div class="paper-analysis-container" id="pdfDom">
    <div v-html="pageData"></div>
    <div>
      <div>课程试卷分析表</div>
      <div class="my-form">
        <div class="my-form-item">
          <div class="my-form-item-label">课程名称</div>
          <div class="my-form-item-content">
            <div>{{ tablelist.coursename }}</div>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">开课教研室</div>
          <div class="my-form-item-content">
            <div>{{ tablelist.classroom }}</div>
            <div>级次专业</div>
            <div style="    padding-left: 15px;">{{ tablelist.levelmajor }}</div>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">课终考核成绩分布</div>
          <div class="my-form-item-content">
            <ul>
              <li>
                <span>分数段</span>
                <span>100-90</span>
                <span>89-80</span>
                <span>79-70</span>
                <span>69-60</span>
                <span>60以下</span>
              </li>
              <li>
                <span>人数</span>
                <span>{{ tablelist.distribution.scoure100 }}</span>
                <span>{{ tablelist.distribution.scoure89 }}</span>
                <span>{{ tablelist.distribution.scoure79 }}</span>
                <span>{{ tablelist.distribution.scoure69 }}</span>
                <span>{{ tablelist.distribution.scoure60 }}</span>
              </li>
              <li>
                <span>百分比</span>
                <span>{{ tablelist.distribution.percent100 }}</span>
                <span>{{ tablelist.distribution.percent89 }}</span>
                <span>{{ tablelist.distribution.percent79 }}</span>
                <span>{{ tablelist.distribution.percent69 }}</span>
                <span>{{ tablelist.distribution.percent60 }}</span>
              </li>
              <li>
                <span>最高分</span>
                <span>{{ tablelist.distribution.scouremax }}</span>
                <span>最低分</span>
                <span>{{ tablelist.distribution.scouremin }}</span>
                <span>平均分</span>
                <span>{{ tablelist.distribution.scoureavg }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">考核分析</div>
          <div class="my-form-item-content">
            <div>
              <span>试卷分析：</span>
              <ul>
                <li>
                  <div>1.题量：</div>
                  <div>
                    <el-checkbox-group v-model="tablelist.tiliang" max="1">
                      <el-checkbox label="偏多"></el-checkbox>
                      <el-checkbox label="适量"></el-checkbox>
                      <el-checkbox label="偏少"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </li>
                <li>
                  <div>2.难易度：</div>
                  <div>
                    <el-checkbox-group v-model="tablelist.nanyilevel" max="1">
                      <el-checkbox label="偏难"></el-checkbox>
                      <el-checkbox label="适量"></el-checkbox>
                      <el-checkbox label="偏易"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </li>
                <li>
                  <div>3.题型结构：</div>
                  <div>
                    <el-checkbox-group v-model="tablelist.jiegou" max="1">
                      <el-checkbox label="合理"></el-checkbox>
                      <el-checkbox label="较合理"></el-checkbox>
                      <el-checkbox label="不合理"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </li>
                <li>
                  <div>4.试题覆盖面与教学要求：</div>
                  <div>
                    <el-checkbox-group v-model="tablelist.yaoqiu" max="1">
                      <el-checkbox label="一致"></el-checkbox>
                      <el-checkbox label="个别不一致 "></el-checkbox>
                      <el-checkbox label="相当不一致 "></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </li>
                <li>
                  <div>5.试题分布（基本要点与综合运用搭配）：</div>
                  <div>
                    <el-checkbox-group v-model=" tablelist.fenbu" max="1">
                      <el-checkbox label="合适"></el-checkbox>
                      <el-checkbox label="基本合适 "></el-checkbox>
                      <el-checkbox label="不合适 "></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </li>
                <li>
                  <div>6.分数分配（教学重点和一般）：</div>
                  <div>
                    <el-checkbox-group v-model=" tablelist.fsshipei" max="1">
                      <el-checkbox label="合理"></el-checkbox>
                      <el-checkbox label="基本合理 "></el-checkbox>
                      <el-checkbox label="不合理 "></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </li>
              </ul>
            </div>
            <div>
              <span>存在问题及原因：</span>
              <span>
							<el-input type="textarea" style="width: 634px" :rows="4" v-model="tablelist.reason"></el-input>
						</span>
            </div>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">改进措施</div>
          <div class="my-form-item-content">
            <div>
              <el-input type="textarea" style="width: 634px" :rows="4" v-model="tablelist.cuoshi"></el-input>
            </div>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">教研室意见</div>
          <div class="my-form-item-content">
            <div>
              <el-input type="textarea" style="width: 634px" :rows="4" v-model="tablelist.classroomreason"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="button-group">
        <div @click="submit()">保存</div>
        <div @click="submit('完成分析')">完成分析</div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="showTipDialog"
      width="983px"
      class="paper-message-container"
    >
      <div class="paper-message-text">
        <div>
          完成分析后将无法修改，确定吗？
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="confirm-button" @click="showTipDialog = false">
          确 定
        </button>
        <button class="cancle-button" @click="showTipDialog = false">
          取 消
        </button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getSelectById, getSubmit} from "@/api/propositionReview/paperAnalysis";
// import downPdf from '@/store/htmlToPdf'
export default {
  name: "paperAnalysis",
  data() {
    return {
      showTipDialog: false,
      tablelist: {
        id: '',
        "coursename": "",
        "classroom": "",
        "levelmajor": "",
        "khid": "",
        "tiliang": [],
        "nanyilevel": [],
        "jiegou": [],
        "yaoqiu": [],
        "fenbu": [],
        "fsshipei": [],
        "reason": '',
        "cuoshi": "",
        "classroomreason": "",
        "createtime": "",
        "updatetime": "",
        "distribution": {
          "scoure100": '',
          "scoure89": '',
          "scoure79": '',
          "scoure69": '',
          "scoure60": '',
          "percent100": '',
          "percent89": '',
          "percent79": '',
          "percent69": '',
          "percent60": '',
          "scouremax": '',
          "scouremin": '',
          "scoureavg": ''
        }
      }
    }
  },
  mounted() {
    this.getSelectById(this.$route.query.id);
  },
  methods: {
    submit(type) {
      if (type === '完成分析') {
        this.showTipDialog = true
      } else {
        this.getSubmit()
      }
    },
    getSubmit() {
      let el = this
      let data = this.tablelist
      let obj = {
        id: data.id,
        coursename: data.coursename,
        classroom: data.classroom,
        levelmajor: data.levelmajor,
        khid: data.khid,
        tiliang: [],
        nanyilevel: [],
        jiegou: [],
        yaoqiu: [],
        fenbu: [],
        fsshipei: [],
        reason: data.reason,
        cuoshi: data.cuoshi,
        classroomreason: data.classroomreason,
        distribution: data.distribution
      }
      obj.tiliang = data.tiliang[0]
      obj.nanyilevel = data.nanyilevel[0]
      obj.jiegou = data.jiegou[0]
      obj.yaoqiu = data.yaoqiu[0]
      obj.fenbu = data.fenbu[0]
      obj.fsshipei = data.fsshipei[0]
      return new Promise(() => {
        getSubmit(obj).then(res => {
          if (res.data.code === 200) {

            this.$router.push({
              path: '/teacher/propositionReview/approval',
            })
            el.$message({
              showClose: true,
              message: "保存成功",
              type: "success",
            });
          } else {

            el.$message({
              showClose: true,
              message: "保存失败，请重新保存",
              type: "error",
            });
          }
        })
      })
    },
    getSelectById(obj) {
      let el = this
      return new Promise(() => {
        getSelectById(obj).then(res => {
          let data = res.data.data
          this.tablelist = {
            id: data.id,
            coursename: data.coursename,
            classroom: data.classroom,
            levelmajor: data.levelmajor,
            khid: data.khid,
            tiliang: [],
            nanyilevel: [],
            jiegou: [],
            yaoqiu: [],
            fenbu: [],
            fsshipei: [],
            reason: data.reason,
            cuoshi: data.cuoshi,
            classroomreason: data.classroomreason,

          }
          if (data.distribution) {
            this.tablelist.distribution = data.distribution
          } else {
            this.tablelist.distribution = {
              "scoure100": '',
              "scoure89": '',
              "scoure79": '',
              "scoure69": '',
              "scoure60": '',
              "percent100": '',
              "percent89": '',
              "percent79": '',
              "percent69": '',
              "percent60": '',
              "scouremax": '',
              "scouremin": '',
              "scoureavg": ''
            }
          }
          if (data.tiliang) {
            this.tablelist.tiliang.push(data.tiliang)
          }
          if (data.nanyilevel) {
            this.tablelist.nanyilevel.push(data.nanyilevel)
          }
          if (data.jiegou) {
            this.tablelist.jiegou.push(data.jiegou)
          }
          if (data.yaoqiu) {
            this.tablelist.yaoqiu.push(data.yaoqiu)
          }
          if (data.fenbu) {
            this.tablelist.fenbu.push(data.fenbu)
          }
          if (data.fsshipei) {
            this.tablelist.fsshipei.push(data.fsshipei)
          }
          console.log(this.tablelist)
        })
      })
    },
  }
};
</script>
<style lang="less" scoped>
.paper-analysis-container {
  .el-checkbox {
    &:nth-child(1) {
      width: 95px;
    }

    &:nth-child(2) {
      width: 130px;
    }
  }

  .el-textarea__inner {
    resize: none;
  }

  .el-dialog__footer {
    padding-bottom: 125px;
  }
}
</style>

<style scoped lang="less">
.paper-analysis-container {
  > div {
    > div {
      &:nth-child(1) {
        width: 1740px;
        margin: 27px auto 20px;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        color: #004CA7;
        text-align: center;
      }
    }

    .my-form {
      width: 1740px;
      border: 1px solid rgba(0, 76, 167, 0.8);
      margin: 0 auto 13px;

      .my-form-item {
        border-bottom: 1px solid rgba(0, 76, 167, 0.39);

        > div {
          display: table-cell;
          min-height: 54px;
          vertical-align: middle;
        }

        .my-form-item-label {
          border-right: 1px solid rgba(0, 76, 167, 0.39);
          font-size: 16px;
          font-weight: bold;
          color: #004CA7;
          background: rgba(77, 129, 192, 0.1);
          width: 283px;
          text-align: center;
        }

        .my-form-item-content {
          width: 1456px;
          font-size: 14px;
          padding-left: 41px;
          color: #004CA7;
        }

        &:nth-child(1) {
          .my-form-item-content {
            height: 54px;
          }
        }

        &:nth-child(2) {
          .my-form-item-content {
            > div {
              display: inline-block;
              height: 49px;
              padding-top: 15px;
              vertical-align: middle;

              &:nth-child(1) {
                width: 620px;
              }

              &:nth-child(2) {
                width: 180px;
                border-left: 1px solid rgba(77, 129, 192, 0.1);
                border-right: 1px solid rgba(77, 129, 192, 0.1);
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                line-height: 20px;
                color: #004CA7;
                background: rgba(77, 129, 192, 0.1);
              }

              &:nth-child(3) {
                width: 613px;
              }
            }
          }
        }

        &:nth-child(3) {
          .my-form-item-content {
            padding-left: 0;

            > ul {
              list-style: none;

              > li {
                border-bottom: 1px solid rgba(0, 76, 167, 0.39);

                &:nth-child(1) {
                  > span {
                    font-weight: bold;
                  }
                }

                &:last-child {
                  border-bottom: none;
                }

                > span {
                  width: 242px;
                  height: 47px;
                  display: inline-block;
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                  text-align: center;
                  vertical-align: middle;
                  padding-top: 15px;
                  color: #004CA7;

                  &:first-child {
                    padding-left: 41px;
                    text-align: left;
                    font-weight: bold;
                  }

                  &:last-child {
                    border-right: none;
                  }
                }
              }
            }
          }
        }

        &:nth-child(4) {
          .my-form-item-content {
            > div {
              &:nth-child(1) {
                padding-top: 9px;

                > span {
                  display: inline-block;
                  vertical-align: top;
                  margin-right: 46px;
                  font-size: 14px;
                  font-weight: bold;
                  line-height: 30px;
                  color: #004CA7;
                }

                > ul {
                  list-style: none;
                  display: inline-block;
                  color: #004CA7;

                  > li {
                    margin-bottom: 10px;

                    > div {
                      display: inline-block;

                      &:nth-child(1) {
                        width: 268px;
                      }
                    }
                  }
                }
              }

              &:nth-child(2) {
                margin-top: 10px;

                > span {
                  &:nth-child(1) {
                    display: inline-block;
                    vertical-align: top;
                    margin-right: 4px;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 30px;
                    color: #004CA7;
                  }

                  &:nth-child(2) {
                    display: inline-block;
                    margin-bottom: 6px;
                  }
                }
              }
            }
          }

        }

        &:nth-child(5) {
          .my-form-item-content {
            padding: 8px 0 8px 157px;
          }
        }

        &:nth-child(6) {
          border-bottom: none;

          .my-form-item-content {
            padding: 12px 0 12px 157px;
          }
        }
      }
    }

    .button-group {
      width: 915px;
      margin: 0 auto;
      text-align: center;

      > div {
        cursor: pointer;
        display: inline-block;
        font-size: 18px;
        padding: 6px 22px;
        border-radius: 6px;

        &:nth-child(1) {
          color: #F3B815;
          border: 1px solid #F3B815;
          background: #FFF6EF;
          margin-right: 139px;
        }

        &:nth-child(2) {
          color: rgba(250, 83, 57, 1);
          border: 1px solid rgba(250, 83, 57, 1);
          background: rgba(255, 239, 239, 1);
        }
      }
    }
  }

  .paper-message-container {
    .paper-message-text {
      > div {
        padding: 57px 0 63px 0;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 20px;
        color: #004ca7;
        text-align: center;
      }
    }

    .el-dialog__footer {
      padding-bottom: 95px;
    }

    .confirm-button {
      width: 87px;
      height: 36px;
      padding: 0;
      background: #f1fff8;
      border: 1px solid #02c86c;
      border-radius: 4px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #02c86c;
      cursor: pointer;
      margin-right: 92px;
    }

    .cancle-button {
      .confirm-button;
      background: #fff6ef;
      border: 1px solid #f3b815;
      color: #f3b815;
      margin-right: 0px;
    }
  }
}
</style>
